<template>
  <view class="editor-container">
    <scroll-view scroll-y :style="{ height }">
      <editor id="editor" class="cu-editor" :placeholder="placeholder" :read-only="readOnly"
              :show-img-size="showImgSize" :show-img-toolbar="showImgToolbar" :show-img-resize="showImgResize"
              @statuschange="onStatusChange" @ready="onEditorReady" @input="onEditorInput" @focus="onEditorFocus"
              @blur="onEditorBlur" />
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'cuEditor',
  props: {
    //editor属性，提示信息
    placeholder: {
      type: String,
      default: '请输入内容',
    },
    height: {
      type: String,
    },
  },
  data() {
    return {
      isFixed: true,
      iphoneXBottomH: 0,
      scrollHeightDefault: 0,
      keyboardHeight: 0,
      readOnly: true,
      isDefaultFormat: true, // 首次聚集时设置默认格式
      isIos: false,
      inputFocus: false,
      formats: {},
      curLength: 0,
      swiperCurrent: 0,
      toolbarShow: false,
      toolBarContentShow: false,
      fixedTopHeight: 0, // 顶部工具栏高度
      toolBarHeight: 100, // 工具栏高度
      toolBarContentHeight: 530, // 工具栏内容高度
      progress: true, //判断是否监听上传进度变化
    }
  },
  beforeUnmount() {
    console.log('editor beforeDestroy')
  },
  methods: {
    onEditorReady() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      let that = this
      uni.createSelectorQuery()
        .in(this)
        .select('#editor')
        .context((res) => {
          that.editorCtx = res.context
          that.readOnly = false
          this.$emit('init')
        })
        .exec()
    },
    onEditorInput(e) {
      let {
        html,
        text,
      } = e.detail
      this.curLength = text.length - 1
      this.$emit('oncurLength', this.curLength)
    },
    onEditorFocus(e) {
      this.toolbarShow = true
      this.inputFocus = true
      if (this.isDefaultFormat) {
        //设置默认格式
        this.editorCtx.format('fontSize', '14px')
        this.editorCtx.format('align', 'left')
        this.isDefaultFormat = false
      }
    },
    onEditorBlur() {
      this.editorCtx.blur()
      this.inputFocus = false
    },
    setValue(value) {
      if (this.editorCtx) {
        this.editorCtx.setContents({
          html: value,
          success: () => {
            this.getContents(res => {
              this.onEditorInput({
                detail: {
                  html: res.html,
                  text: res.text,
                },
              })
              this.$emit('update', res)
            })
          },
        })
      }
    },
    getContents(callback) {
      //由于获取编辑器内容getContents为异步，因此需要使用callback回调
      this.editorCtx.getContents({
        success: res => {
          callback(res)
        },
      })
    },
  },

}
</script>

<style lang="scss">
.cu-editor {
  box-sizing: border-box;
  border-top: 1px solid #f5f5f5;
  background-color: #fff;
  width: 100%;
  height: 100%;
  font-size: 28rpx;
  line-height: 1.5;
  overflow: auto;
  padding-bottom: 20rpx;
  min-height: unset !important;
}
</style>
